<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <hello ref="helloRef" :name="person1" age="18" @abcd="onAbcd"></hello>

      <button @click="getHelloInstance">获取hello组件的实例</button>
    </div>

    <script src="./lib/vue.global.js"></script>
    <script>
      const { createApp, computed, ref } = Vue;

      const app = createApp({
        methods: {
          getHelloInstance() {
            const helloIS = this.$refs.helloRef;
            console.log(helloIS); // data methods setup 返回的
          },
        },

        // 根组件
        setup() {
          const person1 = ref("张三");

          function onAbcd() {
            console.log("onAbcd");
            person1.value = "里斯";
          }

          return {
            person1,
            onAbcd,
          };
        },
      });

      // 创建一个组件
      app.component("hello", {
        template: `
          <div>
            <h1>Hello - {{ name }}</h1>

            <button @click="fn1">点我，修改姓名</button>
          </div>
        `,

        props: ["name"],

        data() {
          return {
            a: "10",
            b: "20",
          };
        },

        setup(props, context) {
          console.log("hello", context);

          function fn1() {
            // 触发一个abcd的自定义事件
            context.emit("abcd");
          }

          function hello() {
            console.log("hello 你好呀");
          }

          // 通过 context.expose 函数，控制外层能够获取到当前的数据或方法
          context.expose({
            msg: "你想干嘛",
          });

          return {
            fn1,
            hello,
          };
        },
      });

      // 挂载实例
      app.mount("#app");
    </script>
  </body>
</html>
